<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>用户地图--恒创后台管理系统</title>
		<link href="__CSS__/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="__ADMIN__/css/style.css" rel="stylesheet" type="text/css"/>
		<!--<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>-->
		<!--<script type="text/javascript" src="js/bootstrap.js" ></script>-->
        <script type="text/javascript" src="__JS__/echarts.min.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uGu7CKGh7yjjXyxWgqDV6C8booQd01g2"></script>
	</head>
	<body>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <!--<a class="navbar-brand" style="color: #3398DB" href="#">恒创后台管理系统</a>-->
                        <a class="navbar-brand" href="#">恒创后台管理系统</a>
                    </div>
                </div>
            </div>
        </nav>
		<div class="container">
            <div class="row">
                <div class="col-md-3 col-lg-3 col-sm-3">
                    <div class="list-group">
                        <a href="index.html" class="list-group-item">
                            首页
                        </a>
                        <a href="introduce.html" class="list-group-item">
                            系统介绍
                        </a>
                        <a href="userManage.html" class="list-group-item">
                            用户管理
                        </a>
                        <a href="#" class="list-group-item">
                            设备管理
                        </a>
                        <a href="#" class="list-group-item active">
                            用户地图
                        </a>
                        <a href="#" class="list-group-item">
                            数据统计分析
                        </a>
                    </div>
                </div>
                <div class="col-md-9 col-lg-9 col-sm-9">
                    <div class="thumbnail" id="mapBox" style="background-color: white;border: 1px solid #ddd;height: 600px;">

                    </div>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <p align="center">
                                Copyright © 2017.HengChuang Team All rights reserved.Powered by
                                <a href="http://115.159.151.135/" target="_blank" title="Xwen">Xwen</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("mapBox");
    var point = new BMap.Point(116.417854,39.921988);
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    map.centerAndZoom(point, 15);
    var opts = {
        width : 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title : "海底捞王府井店" , // 信息窗口标题
        enableMessage:true,//设置允许信息窗发送短息
        message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
    }
    var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
    marker.addEventListener("click", function(){
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    });
</script>
